<!doctype html>
<html lang="en">
   <head>
		<title>Example with jQuery data HTML5 attribute - Google maps jQuery plugin</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta http-equiv="content-language" content="en" />
		<meta name="author" content="Johan Säll Larsson" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<meta name="keywords" content="Google maps, jQuery, plugin, HTML5, Data" />
		<meta name="description" content="An example how to use jQuery data HTML5 attribute with Google maps jQuery plugin" />
		<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
		<meta name="DC.title" content="Example with jQuery data HTML5 attribute - Google maps jQuery plugin" />
		<meta name="DC.subject" content="Google maps;jQuery;plugin;HTML5;Data" />
		<meta name="DC.description" content="An example how to use jQuery data HTML5 attribute with Google maps jQuery plugin" />
		<meta name="DC.creator" content="Johan Säll Larsson" />
		<meta name="DC.language" content="en" />
		<link type="text/css" rel="stylesheet" href="css/960/min/960.css" />
		<link type="text/css" rel="stylesheet" href="css/960/min/960_16_col.css" />
		<link type="text/css" rel="stylesheet" href="css/normalize/min/normalize.css" />
		<link type="text/css" rel="stylesheet" href="css/prettify/min/prettify.css" />
		<link type="text/css" rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
    </head>
    <body>
		<header class="dark">
			<div class="container_16">
				<h1><a href="/">Google maps jQuery plugin <span id="version"></span></a> data HTML5 attribute</h1>
			</div>
		</header>
		<div class="container_16">
			<article class="grid_16">
				<div class="item rounded dark">
					<div id="map_canvas" class="map rounded"></div>
				</div>
				<p>This example shows a meta data mapping similar to the plugin jMapping.</p>
				<div class="content rounded light shadow">
					<ul>
						<li data-gmapping='{"id":"m_1","latlng":{"lat":27.6648274,"lng":-81.51575350000002},"tags":"drupal"}'>
							<p class="info-box">Florida DrupalCamp - Feb 11 2012</p>
						</li>
						<li data-gmapping='{"id":"m_2","latlng":{"lat":1.352083,"lng":103.81983600000001},"tags":"drupal"}'>
							<p class="info-box">DrupalCamp Singapore - Mar 03 2012</p>					
						</li>
						<li data-gmapping='{"id":"m_3","latlng":{"lat":39.7391536,"lng":-104.9847034},"tags":"drupal"}'>
							<p class="info-box">DrupalCon 2012 Denver - Mar 20 2012</p>				
						</li>
						<li data-gmapping='{"id":"m_4","latlng":{"lat":36.1658899,"lng":-86.7844432},"tags":"drupal"}'>
							<p class="info-box">DrupalCamp Nashville - Apr 28 2012</p>				
						</li>
						<li data-gmapping='{"id":"m_5","latlng":{"lat":55.6760968,"lng":12.568337100000008},"tags":"drupal"}'>
							<p class="info-box">DrupalCamp Copenhagen 5.0 - May 11 2012</p>				
						</li>
					</ul>
				</div>
				<div class="content rounded light shadow">
					<h2>Using jquery with Google maps</h2>
					<p>Download <a href="http://jquery.com/">jQuery 1.4.X or higher</a> or use <a href="http://code.google.com/intl/sv-SE/apis/libraries/devguide.html">Googles</a> or <a href="http://www.asp.net/ajaxlibrary/cdn.ashx">Microsofts</a>  <abbr title="Content delivery network"><a href="http://en.wikipedia.org/wiki/Content_delivery_network">CDN</a></abbr>.</p>
<pre class="prettyprint rounded">
&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"&gt;&lt;/script&gt;</pre>

<pre class="prettyprint rounded">
$('#map_canvas').gmap().bind('init', function(ev, map) {
	$("[data-gmapping]").each(function(i,el) {
		var data = $(el).data('gmapping');
		$('#map_canvas').gmap('addMarker', {'id': data.id, 'tags':data.tags, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'bounds':true }, function(map,marker) {
			$(el).click(function() {
				$(marker).triggerEvent('click');
			});
		}).click(function() {
			$('#map_canvas').gmap('openInfoWindow', { 'content': $(el).find('.info-box').text() }, this);
		});
	});	
});</pre>

					<p>There are many ways of writing this snippet, please refer to the <a href="http://code.google.com/p/jquery-ui-map/wiki/jquery_ui_map_v_3_sample_code">sample code</a> section in the wiki.</p>
				</div>
			</article>
		</div>
		<footer class="dark">
			<div class="container_16">
				<div class="grid_8">
					<h2>More Google maps and jQuery examples</h2>
					<ul>
						<li><a href="jquery-google-maps-basic-example.html">Google maps and jQuery basics</a></li>
						<li><a href="jquery-google-maps-geolocation.html">Google maps with geolocation</a></li>
						<li><a href="jquery-google-maps-clustering.html">Using clusters with MarkerClusteredPlus</a></li>
						<li><a href="jquery-google-maps-streetview.html">Microformats, Google streetview and jQuery dialog</a></li>
						<li><a href="jquery-google-maps-geocoding.html">Click and drag events with Google geo search</a></li>
						<li><a href="jquery-google-maps-json.html">Show markers from JSON</a></li>
						<li><a href="jquery-google-maps-microdata.html">Show markers with microdata</a></li>
						<li><a href="jquery-google-maps-microformat.html">Show markers with microformats</a></li>
						<li><a href="jquery-google-maps-rdfa.html">Show markers with RDFa</a></li>
						<li><a href="jquery-google-maps-fusion-tables.html">Show markers from Google Fusion tables</a></li>
						<li><a href="jquery-google-maps-filtering.html">Filter markers by property</a></li>
						<li><a href="jquery-google-maps-mobile.html">Google maps with <strong>jQuery mobile</strong></a></li>
					</ul>
				</div>
				<div id="forum" class="hidden rounded forum grid_8"></div>
				<div class="grid_16" itemscope itemtype="http://data-vocabulary.org/Person">
					Author: <span itemprop="name">Johan S&auml;ll Larsson</span> (<a href="http://johansalllarsson.se" itemprop="url">http://johansalllarsson.se</a>)
				</div>
			</div>
		</footer>
		
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
		<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/underscore-1.2.2/underscore.min.js"></script>
		<script type="text/javascript" src="js/backbone-0.5.3/backbone.min.js"></script>
		<script type="text/javascript" src="js/prettify/prettify.min.js"></script>
		<script type="text/javascript" src="js/demo.js"></script>
		<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
		<script type="text/javascript">
            $(function() { 
				demo.add(function() {
					$('#map_canvas').gmap({'disableDefaultUI':true, 'callback': function() {
						var self = this;
						$("[data-gmapping]").each(function(i,el) {
							var data = $(el).data('gmapping');
							self.addMarker({'id': data.id, 'tags':data.tags, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'bounds':true }, function(map,marker) {
								$(el).click(function() {
									$(marker).triggerEvent('click');
								});
							}).click(function() {
								self.openInfoWindow({ 'content': $(el).find('.info-box').text() }, this);
							});
						});						
					}});
				}).load();
			});
        </script>
    
	</body>
</html>